<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" scope="page" />
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
	<link rel="stylesheet" href="${ctx}/css/templatemo_style.css"/> <!-- 页面整体布局样式定义 -->
	<link rel="stylesheet" href="${ctx}/css/ddsmoothmenu.css" /> <!-- 菜单样式定义 -->
	<script type="text/javascript" src="${ctx}/js/jquery-1.4.3.min.js"></script>	
	
	<script type="text/javascript">
		var ctx = "${pageContext.request.contextPath}";
		
		function showUserName(){
			var name = "${user.username}";
			if(name != ""){
				$("#login").html(name);
				$("#exitP").show();
				$("#login").attr("href", ctx + "/user?flag=info&userId=${user.userId}");
			}else{
				$("#login").html("登录");
				$("#exitP").hide();
				$("#login").attr("href", ctx + "/user?flag=login");
			}
		}

		function checkQuantity(num, productId, oldqua,shopping_cart_id, sale_index){ // 检测库存大小
			var quantity = num.value;
			console.log("quantity:" + quantity + "; productId=" + productId);
			var reg = /^\d+$/;
			if(reg.test(quantity) && quantity != 0 && quantity != ""){
				$.ajax({
					type : "post",
					url : ctx + "/car?falg=checkcar",
					data : {
						"quantity" : quantity,
						"productId" : productId,
                        "shopping_cart_id" : shopping_cart_id
					},
					dataType : "json",
					success: function (data) {
						if(data.code == 0){
							alert("该商品最大库存量为：" + data.stock);
							num.value = oldqua;
						}else{
                            document.getElementById("total").innerHTML = data.total;
                            $(".sale_" + sale_index).html("￥"+ data.obj.sale);
						}
					},
					error:function () {
						alert("@aaaaa");
                    }
				});
			}else{
				alert("格式不正确！");
				num.value = oldqua;
			}
		
		}
		
		function updateShopcart(){
			var productIds = document.getElementsByName("productId");
			var quantitys = document.getElementsByName("quantity");
			
			var productIdarr = new Array();
			var quantityarr = new Array();
			
			var shoppingCarStr = new String();
			for(var i = 0;i < quantitys.length;i++){
				var quantity = quantitys[i].value;
				quantityarr[i] = quantity.trim();
				var productid = productIds[i].innerHTML;
				productIdarr[i] = productid.trim();
				shoppingCarStr += (productIdarr[i]+":"+quantityarr[i]+",");
			}
			location.href= ctx + "/shopcart?flag=u&shoppingCarStr="+shoppingCarStr;
		}
		
		function toSettlePage(){
			location.href= ctx + "/car?falg=closecar";
		}

		function aaa(obj){
            alert(obj.value);
		}
	</script>
</head>

<body>
	<div id="templatemo_body_wrapper">
		<div id="templatemo_wrapper">


			<!-- header -->
			<div id="templatemo_header">
				<div id="site_title"><h1><a href="">穿美在线鞋城</a></h1></div>
				<div id="header_right">
					<p>
						<a href="" id="login">登录</a>&nbsp;
						<span id="exitP" style="display: none"><a href="${ctx}/user?flag=logout" id="exit">注销</a></span>
					</p>
				</div>
				<div class="cleaner"></div>
			</div>
			<!-- END of templatemo_header -->


			  <!-- menu -->
			  <div id="templatemo_menubar">
			  		<div id="top_nav" class="ddsmoothmenu">
						<ul>
							<li><a href="${ctx}/homeservlet" >首页</a></li>
							<li><a href="${ctx}/product">产品</a></li>
                            <li><a href="${ctx}/car?falg=selectcar">我的购物车</a></li>
							<li><a href="${ctx}/order?falg=selectorder">我的订单</a></li>
						</ul>
						<br style="clear: left" />
					</div> <!-- end of ddsmoothmenu -->
			  </div><!-- END of templatemo_menubar -->


			  <!-- main -->
			  <div id="templatemo_main">
					<!-- 侧边栏 -->
					<div id="sidebar" class="float_l">
						<!-- sidebar 1 -->
						<div class="sidebar_box"><span class="bottom"></span>
							<h3>品牌</h3>
							<div class="content"> 
								<ul class="sidebar_list">
									<c:forEach var="list" items="${homeList}">
										<li><a href="${ctx}/product?categoryId=${list.category_id}">${list.name}</a></li>
									</c:forEach>
								</ul>
							</div>
						</div>
						<!-- sidebar 2 -->
						<div class="sidebar_box"><span class="bottom"></span>
							<h3>热卖单品 </h3>
							<div class="content">
								<c:forEach var="listNew" items="${homeListReMai}">
									<div class="bs_box">
										<a href=""><img src='${listNew.imgpath}' alt="image" style="width:62px;height:72px"/></a>
										<h4><a href="javascript:void(0);">${listNew.feature}</a></h4>
										<p class="price">${listNew.price}</p>
										<div class="cleaner"></div>
									</div>
								</c:forEach>
							</div>
						</div>
					</div><!-- END of sidebar -->

					<!-- 内容展示区 -->
					<div id="content" class="float_r">
						<h3>购物车</h3>
						<c:choose>
							<c:when test="${CarList != null && fn:length(CarList) > 0}"><%--<c:when test="${shoppingCarts != null && fn:length(shoppingCarts) > 0}">--%>
								<table width="680px" cellspacing="0" cellpadding="5">
			                   	    <tr bgcolor="#ddd">
			                        	<th width="220" align="left">图片 </th>
			                        	<th width="180" align="left">商品描述 </th>
			                       	  	<th width="100" align="center">数量 </th>
			                        	<th width="60" align="right">价格 </th>
			                        	<th width="60" align="right">小计 </th>
			                        	<th width="90"></th>  
			                        </tr>
									<c:forEach var="listCar" items="${CarList}" varStatus="s">
				                    	<tr>
				                        	<td><img src="${listCar.imgpath}" alt="image 1" /></td>
				                            <td>${listCar.feature}</td>
				                            <td align="center">
				                            	<input type="text" name="quantity" value="${listCar.quantity}" onblur="checkQuantity(this, '${listCar.product_id}',${listCar.quantity},'${listCar.shopping_cart_id}', ${s.index})" style="width:22px;height:12px;text-align:center;" />
				                            </td>
				                            <td align="right">￥${listCar.price}</td>
				                            <td align="right" class="sale_${s.index}">￥${listCar.sale}</td>
				                            <td align="center"> 
				                            	<a href="${ctx}/car?falg=deletecar&shopping_cart_id=${listCar.shopping_cart_id}"><img src="/images/remove_x.gif" alt="remove" /><br />移除</a>

				                            </td>
				                            <span name="productId" style="color:blue;display: none">商品ID</span>
										</tr>
									</c:forEach>
			                        <tr>
			                        	<td colspan="3" align="right"  height="30px"><span id="update">如果你已修改了商品，请单击 <a onclick="updateShopcart()"><strong>更新</strong></a></span>&nbsp;&nbsp;</td>
			                            <td align="right" style="background:#ddd; font-weight:bold"> 合计 </td>
			                            <td align="right" style="background:#ddd; font-weight:bold" id="total"> ￥${total} </td>
			                            <td style="background:#ddd; font-weight:bold"> </td>
									</tr> 
								</table>
								
								<div style="float:right; width: 215px; margin-top: 20px;">
				                    <p><a onclick="toSettlePage()">结算</a></p>
				                    <p><a href="${ctx}/car?falg=gohome">继续购物</a></p>
			                    </div>
							</c:when>
							<c:otherwise>
								<span id="msg1" style="color:red; font-size:20px;">当前没有任何商品！</span>
							</c:otherwise>
						</c:choose>
	                </div>
                    
					<div class="cleaner"></div>
			  </div><!-- END of templatemo_main -->


			  <!-- footer -->
			  <div id="templatemo_footer">
					<p>
						<a href="${ctx}/homeservlet">首页</a> | <a href="${ctx}/product">产品</a> | <a href="${ctx}/car?falg=selectcar">我的购物车</a> | <a href="${ctx}/order?falg=selectorder">我的订单</a>
					</p>
					版权所有 (c) 2018 <a href="javascript:void(0);">金桥软件</a>
			  </div><!-- END of templatemo_footer -->
		  

		</div><!-- END of templatemo_wrapper -->
	</div><!-- END of templatemo_body_wrapper -->

<script type="text/javascript">
	$(function(){
		showUserName();

	});
</script>
</body>
</html>